<template>
	<view class="page" :style="{ 'height': h + 'px', 'padding-top': mt + 'px' }">
		<c-nav-bar title="开发票" bgColor="transparent" :showHome="false"></c-nav-bar>
		<image class="bg" src="https://i.ringzle.com/file/20240626/b5f984936f994d11b7ea1d2cf119e321.png"></image>
		<view class="pt_search">
			<view class="pts_left">
				<image src="https://i.ringzle.com/file/20240129/ad3412950aeb48e48c1cfe86db397eb4.png"></image>
				<input type="text" :placeholder="placeholder" placeholder-style="ptsl_inp" v-model="keyword" @blur="setKeyword"
					@confirm="confirmKeyword">
			</view>
			<view class="pts_right" @tap="search">搜索</view>
		</view>
		<view class="list" v-if="list.length > 0" :style="{'height':'calc(100% - 79px)'}">
			<u-list @scrolltolower="scrolltolower">
				<u-list-item v-for="(item, index) in list" :key="index" @tap="toInvoice(item)">
					<template v-if="type=='yjl'">
						<view class="l_yjl">
							<view class="top">
								<view class="left">
									<text>渔家乐</text>
								</view>
								<view class="right">
									<text>已完成</text>
								</view>
							</view>
							<view class="content">
								<view class="title">
									<text>{{item.goodsNameAndType}}</text>
									<text>￥{{item.totalPrice}}</text>
								</view>
								<view class="room_price">
									<text>游玩日期：{{item.playDate}}</text>
								</view>
							</view>
						</view>
					</template>
					<template v-else>
						<view class="l_jd">
							<view class="top">
								<view class="left">
									<text>景点门票</text>
								</view>
								<view class="right">
									<text>已完成</text>
								</view>
							</view>
							<view class="content">
								<view class="title">{{ item.scenicSpotName }}</view>
								<view class="date">
									<text>游玩日期</text>
									<text>{{ item.playDate }}</text>
								</view>
								<view class="room_price">
									<view class="room">
										<text>游客 X{{item.qty}}</text>
									</view>
									<view class="price">
										<text>¥{{ item.realityPay }}</text>
									</view>
								</view>
							</view>
						</view>
					</template>
				</u-list-item>
			</u-list>
		</view>
		<view class="empty" v-else>
			<text>您还没有可开票订单</text>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				keyword:'',
				list:[],
				pageIndex:1,
				isOver:false,
				isall:false,
				orderNum:0,
				price:0,
				type:'',
				placeholder:'请输入身份证号或订单号查询'
			}
		},
		onLoad(option) {
			if(option.type){
				this.type = option.type
				if(this.type=='yjl') this.placeholder = '请输入订单号查询';
			}
			this.getList();
		},
		methods:{
			setKeyword(e) {
				this.keyword = e.target.value;
			},
			confirmKeyword(e) {
				this.keyword = e.target.value;
				this.initList();
			},
			search(){
				this.initList();
			},
			initList() {
				this.pageIndex = 1;
				this.isOver = false;
				this.list = [];
				this.orderNum = 0;
				this.price = 0;
				this.isall = false;
				this.getList();
			},
			getList(){
				if(this.type=='yjl'){
					let that = this;
					this.$api.get('/api/fishering/personCenterPage', {
						openId: JSON.parse(uni.getStorageSync('userInfo')).openId,
						status: 3,//3：已完成  ''：查询全部
						page: this.pageIndex,
						limit: 10,
						search: this.keyword,
						delFlag: 0,
						invoiceStatus:0
					}).then(res => {
						if (res.data.code === 0) {
							let {
								list,
								total
							} = res.data.data;
							that.list = [...that.list, ...list];
							that.list.forEach(l=>l.realityPay = l.totalPrice);
							if (res.data.data.list.length < 10) {
								this.isOver = true;
							} else {
								that.pageIndex++;
							}
						} else that.$showToast(res.data.msg);
					})
				}else{
					this.$api.get('/api/scenic/selectOrderPage', {
						openId: JSON.parse(uni.getStorageSync('userInfo')).openId,
						limit: -1,
						status: 3,//3：已完成  ''：查询全部
						condition: this.keyword,
					}).then(res => {
						if (res.data.code == 0) {
							this.list = res.data.data.ticketOrderList||[];
						}else this.$showModal(res.data.msg);
					})
				}
			},
			scrolltolower() {
				if (this.isOver) return
				this.getList();
			},
			toInvoice(item){
				//type:1 渔家乐、2 景点
				let type = this.type=='yjl'?1:2;
				uni.navigateTo({
					url:'/pagesMy/invoice/invoice?item='+JSON.stringify(item)+'&type='+type
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page{
		background: #F5F8FA;
		box-sizing: border-box;
		
		.bg{
			width: 100%;
			height: 570rpx;
			position: absolute;
			top: 0;
			left: 0;
		}
		
		.pt_search {
			width: calc(100% - 40rpx);
			margin: 30rpx 20rpx 20rpx;
			padding: 12rpx;
			box-sizing: border-box;
			border-radius: 38rpx;
			border: 1rpx solid #007A69;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;
			background: #FFFFFF;

			.pts_left {
				width: calc(100% - 105rpx);
				padding: 0 18rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;

				image {
					width: 28rpx;
					height: 28rpx;
				}

				input {
					width: calc(100% - 28rpx);
					padding-left: 20rpx;
					box-sizing: border-box;
					border: none;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #999999;
					line-height: 40rpx;
				}

				.ptsl_inp {
					color: #AAAAAA;
				}
			}

			.pts_right {
				width: 105rpx;
				height: 56rpx;
				background: #007A69;
				border-radius: 38rpx;
				line-height: 56rpx;
				text-align: center;
				font-size: 26rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}

		.list{
			width: 100%;
			padding: 0 20rpx;
			box-sizing: border-box;
			overflow-y: auto;
			
			.l_jd {
				width: 100%;
				margin-bottom: 20rpx;
				border-radius: 16rpx;
				background: #fff;
				padding: 40rpx 24rpx;
				box-sizing: border-box;
			
				.top {
					display: flex;
					justify-content: space-between;
			
					.left {
						display: flex;
						align-items: center;
			
						text {
							font-size: 28rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #333333;
						}
					}
			
					.right {
						text-align: right;
						font-size: 26rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #333333;
					}
				}
			
				.content {
					padding: 28rpx 0 0 0;
					background: #fff;
			
					.title {
						font-size: 32rpx;
						font-family: PingFang-SC, PingFang-SC;
						font-weight: bold;
						color: #333333;
						line-height: 45rpx;
					}
			
					.date {
						display: flex;
						align-items: center;
						margin-top: 32rpx;
			
						&>text {
							font-size: 24rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #808080;
			
							&:nth-child(1) {
								margin-right: 20rpx;
								letter-spacing: 2rpx;
							}
						}
					}
			
					.room_price {
						display: flex;
						justify-content: space-between;
						margin-top: 32rpx;
			
						.room {
							display: flex;
							align-items: center;
			
							&>text {
								font-size: 24rpx;
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								color: #808080;
								line-height: 24rpx;
							}
						}
			
						.price {
							text {
								font-size: 32rpx;
								font-family: PingFang-SC, PingFang-SC;
								font-weight: bold;
								color: #333333;
							}
						}
					}
				}
			}
		
			.l_yjl{
				width: 100%;
				margin-bottom: 20rpx;
				border-radius: 16rpx;
				background: #fff;
				padding: 40rpx 24rpx;
				box-sizing: border-box;
				
				.top {
					display: flex;
					justify-content: space-between;
				
					.left {
						display: flex;
						align-items: center;
				
						text {
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #111111;
							line-height: 28rpx;
						}
					}
				
					.right {
						text-align: right;
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						line-height: 37rpx;
				
						text {
							color: #999;
						}
					}
				}
				
				.content {
					padding: 22rpx 0 24rpx 0;
					background: #fff;
				
					.title {
						display: flex;
						align-items: center;
						justify-content: space-between;
				
						text {
							font-size: 32rpx;
							font-family: PingFang-SC-Bold, PingFang-SC;
							font-weight: bold;
							color: #333333;
							line-height: 45rpx;
				
							&:last-child {
								color: #111111;
							}
						}
					}
				
					.date {
						display: flex;
						align-items: center;
						margin-top: 22rpx;
				
						&>text {
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #AAAAAA;
							line-height: 24rpx;
						}
					}
				
					.room_price {
						margin-top: 16rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #AAAAAA;
					}
				}
				
				.textQx {
					color: #999;
				}
				
				.s1 {
					color: #333333 !important;
				}
				
				.s0 {
					color: #feb000 !important;
				}
			}
		}

		.empty {
			width: 100%;
			height: calc(100% - 102rpx);
			display: flex;
			align-items: center;
			justify-content: center;

			text {
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #808080;
			}
		}
		
		.bottom {
			width: 100%;
			height: 164rpx;
			background: #fff;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 2;
		
			.b_box {
				width: 100%;
				padding: 21rpx 30rpx 0;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
		
				.b_left {
					display: flex;
					align-items: center;
		
					.bl_qx {
						display: flex;
						align-items: center;
		
						image {
							width: 40rpx;
							height: 40rpx;
						}
		
						text {
							font-size: 26rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #808080;
							margin-left: 20rpx;
						}
					}
		
					.bl_text {
						margin-left: 24rpx;
						display: flex;
						flex-direction: column;
		
						.text {
							font-size: 28rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #333333;
		
							&:last-child {
								margin-top: 12rpx;
							}
							
							span{
								font-family: PingFang-SC, PingFang-SC;
								font-weight: bold;
								font-size: 32rpx;
								color: #FF4141;
							}
						}
					}
				}
		
				.b_right {
					width: 218rpx;
					height: 80rpx;
					background: #007A69;
					border-radius: 46rpx;
					border: 1rpx solid #007A69;
					line-height: 80rpx;
					text-align: center;
					font-size: 32rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					letter-spacing: 2rpx;
				}
			}
		}
	}
</style>